<template>
  <view id="app">
    <!-- 启动页广告 -->
    <AdSplash v-if="showSplash" @close="handleSplashClose" />
    
    <!-- H5 端自定义 TabBar -->
    <!-- #ifdef H5 -->
    <CustomTabbar />
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AdSplash from '@/components/ad-splash/ad-splash.vue'
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { useImageStore } from '@/stores/image'
import { useAdStore } from '@/stores/ad'
import { useSettingsStore } from '@/stores/settings'
import { useUserStore } from '@/stores/user'
import { getFavorites, getViewHistory, getAdConfig, saveAdConfig } from '@/utils/storage'
import { getAdConfig as fetchAdConfig } from '@/api/ad'
import { getAppConfig } from '@/api/config'

const showSplash = ref(true)

onMounted(() => {
  // 初始化存储数据
  initStoreData()
})

async function initStoreData() {
  const imageStore = useImageStore()
  const adStore = useAdStore()
  const settingsStore = useSettingsStore()
  const userStore = useUserStore()
  
  // 初始化设置
  settingsStore.initSettings()
  
  // 用户登录处理
  // #ifdef MP-WEIXIN
  // 微信小程序：尝试微信登录
  if (!userStore.isLoggedIn) {
    try {
      await userStore.loginWithWeixin()
      console.log('微信登录成功')
    } catch (err) {
      console.warn('微信登录失败:', err)
    }
  }
  // #endif
  
  // #ifdef H5
  // H5：自动游客登录（如果未登录或登录失败）
  if (!userStore.isLoggedIn) {
    try {
      await userStore.loginAsGuest()
      console.log('游客登录成功')
    } catch (err) {
      console.warn('游客登录失败:', err)
    }
  }
  // #endif
  
  // 加载收藏列表
  const favorites = getFavorites()
  if (favorites.length > 0) {
    imageStore.favorites = favorites
  }
  
  // 加载浏览历史
  const history = getViewHistory()
  if (history.length > 0) {
    imageStore.viewHistory = history
  }
  
  // 从服务器获取广告配置和应用配置
  try {
    // 获取广告配置
    const adConfigRes = await fetchAdConfig()
    if (adConfigRes.code === 200 && adConfigRes.data) {
      adStore.setAdConfig(adConfigRes.data)
      // 保存到本地存储
      saveAdConfig(adConfigRes.data)
    }
  } catch (err) {
    console.warn('获取广告配置失败，使用本地配置:', err)
    // 如果获取失败，使用本地存储的配置
    const localAdConfig = getAdConfig()
    if (localAdConfig) {
      adStore.setAdConfig(localAdConfig)
    }
  }
  
  try {
    // 获取应用配置（可用于功能开关等）
    const appConfigRes = await getAppConfig()
    if (appConfigRes.code === 200 && appConfigRes.data) {
      // 可以在这里处理应用配置，例如功能开关
      console.log('应用配置:', appConfigRes.data)
    }
  } catch (err) {
    console.warn('获取应用配置失败:', err)
  }
}

function handleSplashClose() {
  showSplash.value = false
}
</script>

<style>
/* 每个页面公共css */
page {
  background-color: #f5f5f5;
}

.app-content {
  padding: 40rpx;
  text-align: center;
}

.title {
  font-size: 36rpx;
  color: #333;
}

/* 全局滚动条样式 */
/* #ifdef H5 */
/* 纵向滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 横向滚动条 */
::-webkit-scrollbar:horizontal {
  height: 8px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: background 0.3s;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 滚动条滑块激活状态 */
::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.4);
}

/* 针对 scroll-view 组件的滚动条 */
scroll-view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

scroll-view::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

scroll-view::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

scroll-view::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 针对横向滚动的 scroll-view */
scroll-view[scroll-x]::-webkit-scrollbar {
  height: 8px;
}

/* Firefox 滚动条样式（全局） */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* #endif */
</style>

